<template>
  <div class="app">
    <div class="search">
      <input
        type="text"
        placeholder="Thread-Goldmund"
        v-model="value"
        @keyup.enter="handleKey(value)"
      />
      <button>搜索</button>
    </div>
    <div class="content">
      <ul>
        <li v-for="(item, index) in result" :key="index" style="margin: 10px 0">
          <div style="display: flex">
            <img :src="item.artists[0].img1v1Url" alt="" />
            <div>
              <p style="line-height: 30px; padding-left: 20px">
                {{ item.name }}
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      result: [],
    };
  },
  mounted() {},
  methods: {
    handleKey(val) {
      this.result = [];
      this.$http(`http://47.108.197.28:3000/search?keywords=${val}`).then(
        (res) => {
          console.log(res.data.result.songs);
          this.result = res.data.result.songs;
        }
      );
    },
  },
};
</script>

<style scoped>
.app {
  width: 10rem;
  overflow: hidden;
  margin: auto;
}
.search {
  width: 10rem;
  margin: auto;
  box-sizing: border-box;
  padding: 20px;
  background-color: #3b393a;
  display: flex;
  justify-content: space-between;
}
input {
  width: 580px;
  outline: none;
  padding-left: 20px;
  height: 50px;
}
button {
  width: 100px;
}
img {
  width: 60px;
  height: 40px;
}
</style>